<template lang="">
    <div id="movearchive">
        <ul>
            <li v-for="(arItem,index) in ArticleData" :key="arItem.id">
                <p>{{arItem.title}}</p>
                <p class="subtitle">作者：{{arItem.autor}}</p>
                <p class="subtitle">时间：{{arItem.time}}</p>
                <div id="text" v-html="arItem.content" v-highlight></div>
                <div id="review"></div>
                <div id="review">
                    <span @touchstart="review(index)">评论{{reviewNum(arItem.id)}}</span>
                    <span><i class="isActive" ref="ele"
                            @touchstart="likeClick(arItem.id,$event)"></i>{{likeNum(arItem.id,index)}}</span>
                </div>
                <div v-show="revColumnShow == index" id="revColumn">
                    <ul>
                        <li v-for="revitem in ArticleRevData" v-if="revitem.articleid == arItem.id ">
                            <span id="revshow">
                                <p>{{revitem.autor}}</p>
                                <span>:</span>
                                <p>{{revitem.content}}</p>
                            </span>
                            <span id="revtime">{{revitem.time}}</span>
                        </li>
                    </ul>
                    <div id="pubRev">
                        <div>
                            <input type="text" id="revname" placeholder="评论人" v-model="revData.revName">
                            <textarea id="revContent" placeholder="说点什么吧！！！"
                                v-model="revData.revCon"></textarea>
                        </div>

                        <button @touchstart="publish(arItem.id)">发表评论</button>
                    </div>
                </div>
                <div id="gap"></div>
            </li>
            <!-- <LoadMore :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore"></LoadMore> -->
        </ul>

    </div>
</template>
<script>
    import LoadMore from './LoadMore';


    export default {
        components: {
        LoadMore
    },


        data() {
            return {
                page: 2,
                enableLoadMore: true,
                ArticleData: [],
                ArticleRevData: [],
                ArticleRev: [],
                // loadNum: 1,
                likenum: [],
                revColumnShow: -1,
                revData: {
                    revName: "",
                    revCon: "",
                    time: "",
                    articleid: "",
                },
            }
        },
        computed: {
            //计算评论人数
            reviewNum() {
                return function (value) {
                    var j = 0;
                    var newArr = this.ArticleRevData;
                    for (let i = 0; i < newArr.length; i++) {
                        if (newArr[i].articleid == value) {
                            j++
                        }
                    }
                    return j
                }
            },
            //计算点赞人数
            likeNum() {
                return function (value, Index) {
                    let Arr = this.likenum;
                    let uuid = localStorage.getItem("userUuid")
                    let count = 0;
                    //计算当前说说的点赞条数
                    Arr.map((a) => {
                        if (a.articleid == value) {
                            count++
                        }
                        return count
                    })
                    //判断该浏览器登录用户当前文章有没有点过赞
                    if (Arr.length !== 0) {
                        this.$nextTick(() => {
                            let ff = this.$refs.ele
                            for (let i = 0; i < Arr.length; i++) {
                                if (Arr[i].uuid == uuid) {
                                    if (Arr[i].articleid == value) {
                                        ff[Index].className = "active"
                                    }
                                }
                            }
                        })
                    }
                    return count
                }
            },

        },
        methods: {
            onLoadMore(done) {
                setTimeout(() => {
                    if(this.ArticleData.length <= this.page){
                        return
                    }
                    if (!this.enableLoadMore) {
                        return
                    }
                    this.page = this.page + 2
                    
                    done();
                }, 200)
            },

            // getMoreData() {
            //     this.loadNum += 1
            // },
            review(index) {
                if (this.revColumnShow == index) {
                    this.revColumnShow = -1;

                } else {
                    this.revColumnShow = index;
                }
            },
            //发表文章评论
            publish(articleid) {
                let date = new Date()
                let year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                let time = year + "-" + month + "-" + day
                this.revData.time = time;
                this.revData.articleid = articleid;
                if (this.revData.revName !== "" && this.revData.revData !== "") {
                    fetch(process.env.VUE_APP_API_URL + "/artReview", {
                        method: 'post',
                        body: JSON.stringify(this.revData),
                        headers: new Headers({
                            'Content-Type': 'application/json'
                        })
                    })
                        .then((res) => {
                            return res.json()
                        })
                        .then((data) => {
                            if (data == "发布成功") {
                                Object.assign(this.$data.revData, this.$options.data().revData)
                                // this.$router.push('/Archive')
                                // location.reload();
                            }
                        })
                        .catch((error) => { console.error('Error:', error) })

                } else {
                    alert("请输入评论人和内容！！")
                }
            },

            //文章点赞
            likeClick(value, e) {
                let likeData = {
                    "ifClick": false,
                    "idNum": value,
                    "useruuid": ""
                }
                likeData.useruuid = localStorage.getItem("userUuid")

                let ele = e.target
                let elepro = e.target.getAttribute("class");
                if (elepro == "isActive") {
                    ele.setAttribute("class", "active");
                    likeData.ifClick = true;

                } else {
                    ele.setAttribute("class", "isActive");
                    likeData.ifClick = false;
                }
                fetch(process.env.VUE_APP_API_URL + "/articleLike", {
                    method: 'post',
                    body: JSON.stringify(likeData),
                    headers: new Headers({
                        'Content-Type': 'application/json'
                    })
                })
                    .then((res) => {
                        return res.json()
                    })
                    .then((data) => {
                        this.getLike()
                    })
                    .catch((error) => { console.error('Error:', error) })
            },
            //请求点赞数据库
            getLike() {
                let uuid = localStorage.getItem("userUuid")
                let a = { "value": "true", "key": uuid };
                fetch(process.env.VUE_APP_API_URL + "/artLikeNum", {
                    method: 'post',
                    body: JSON.stringify(a),
                    headers: new Headers({
                        'Content-Type': 'application/json'
                    })
                })
                    .then((res) => {
                        return res.json()

                    })
                    .then((data) => {
                        this.likenum = data
                        // console.log(data)
                    })
                    .catch((error) => { console.error('Error:', error) })
            },
        },
        created() {
            //请求文章的数据
            fetch(process.env.VUE_APP_API_URL + "/Archive", {
                method: 'post',
                headers: new Headers({
                    //'application/json'
                    'Content-Type': 'application/json'
                })
            })
                .then((res) => {
                    return res.json()
                })
                .then((data) => {
                    this.ArticleData = data.reverse();
                    // console.log(this.ArticleData)
                })
                .catch((error) => { console.error('Error:', error) }),


                //请求文章下面的评论内容
                fetch(process.env.VUE_APP_API_URL + "/ArchiveRev", {
                    method: 'post',
                    headers: new Headers({
                        //'application/json'
                        'Content-Type': 'application/json'
                    })
                })
                    .then((res) => {
                        return res.json()
                    })
                    .then((data) => {
                        this.ArticleRevData = data
                        // console.log(this.ArticleRevData)
                    })
                    .catch((error) => { console.error('Error:', error) })

            //请求点赞数据
            this.getLike()
        }

    }
</script>
<style scoped>
    #movearchive {
        font-size: 1rem;
    }

    #movearchive>ul {
        
        margin-bottom: 3rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #movearchive>ul>li {
        background-color: rgba(189, 195, 197, 0.5);
        display: flex;
        flex-direction: column;
        width: 98%;
        border: 1px solid gray;
        align-items: center;
        margin: 0.5rem 0;
        margin-bottom: 3rem;
    }

    #movearchive>ul>li>p:first-child {
        font-size: 1.3rem;
    }

    #movearchive .subtitle {
        font-size: 0.8rem;
        align-self: flex-end;
        margin-right: 1rem;  
    }

    #text {
        width: 100%;
        border-top: 1px solid gray;
        border-bottom: 1px solid gray;
        min-height: 15rem;
    }

    #review {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #review>span>.isActive {
        display: inline-block;
        background: url("../assets/images/good.png");
        width: 1.2rem;
        height: 1.2rem;
        background-size: 100% 100%;
        vertical-align: middle;
    }

    #review>span>.active {
        display: inline-block;
        background: url("../assets/images/redgood.png");
        width: 1.2rem;
        height: 1.2rem;
        background-size: 100% 100%;
        vertical-align: middle;
    }

    #revColumn {
        width: 96%;
    }

    #revColumn>ul {
        width: 100%;
        /* border: 1px solid gray; */
        background-color: rgb(228, 225, 225);
        /* padding: 0.2rem 0; */
        margin: 0.3rem 0;

    }

    #revColumn>ul>li {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    #revshow:first-child {
        margin: auto 0.2rem;
    }

    #revshow>p {
        display: inline;
    }

    #revtime {
        /* height: 100%; */
        font-size: 0.8rem;
        white-space: nowrap;
        text-align: center;
        display: flex;
        align-items: center;
        background-color: rgb(172, 169, 169);
    }

    #pubRev {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #pubRev>div {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 0.3rem 0;
    }

    #revname {
        /* border: 1px solid gray; */
        width: 25%;
        height: 1.58rem;
    }

    #revContent {
        resize: none;
        width: 75%;
        height: 1.7rem;
    }

    textarea::placeholder {
        height: 1.7rem;
        line-height: 1.7rem;
    }

    #gap {
    width: 101%;
    height: 2rem;
    background: url("../assets/images/gap.jpg");
    background-size: 100% 100%;
  }

    #pubRev>button {
        width: 4.5rem;
        margin: 0.2rem;
        background-color: rgb(50, 114, 225);
        font-weight: bold;
        color: rgb(176, 173, 173);
        right: 0;
        left: 0;
        display: block;
        border-radius: 0.3rem;
        font-size: 1rem;
    }
</style>